require(['./config'], () => {
    require(['swiper','template','header', 'footer','shopcar'], (Swiper,template,header) => {
      class Index {
        constructor () {
            this.banner()
            this.getCategory()
            this.getHealthList()
            this.getBabyList()
            header.calCartCount ()
            this.toBuy()
        }
        banner () {
          new Swiper ('.banner', {
            loop: true, // 循环模式选项
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.banner .swiper-button-next',
              prevEl: '.banner .swiper-button-prev',
            },
            autoplay: {
              delay: 2000, // 轮播间隔时间
              disableOnInteraction: false // 用户操作之后还可以继续轮播
            },
            pagination: {
              el: '.banner .swiper-pagination',
              type: 'custom',
              clickable:true,
              renderCustom: function (Swiper, current, total) {
                var paginationHtml = '';
                for (var i = 0; i < total; i++) {
                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                  if (i === (current - 1)) {
                      paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                  }else{
                      paginationHtml += '<span class="swiper-pagination-customs"></span>';
                  }
                }
                    return paginationHtml;
                }
            }
          })   
        }
        getCategory () {
          // 请求本地json文件渲染
          $.get('/libs/json/appleList.json', resp => {
            // template方法第一个参数传script的id名（不加#）
            // 第二个参数是对象，对象里写模板所需要的数据
            //   对象的属性名是模板里需要的变量名，属性值是从后端拿到的值
            const html = template('categoryListTemplate', {
              list: resp
            })
            $('#categoryList').html(html)
          })
        }
        getHealthList () {
          
          // 利用rap2请求数据渲染
          $.get('http://rap2.taobao.org:38080/app/mock/264454/api/home/foodlist', resp => {
            if (resp.code === 200) {
              
              const { list } = resp.body
              $('#foodCategory').html(template('foodCategoryTemplate', { list }))
            }
          })

        }
        getBabyList(){
          $.get('http://rap2.taobao.org:38080/app/mock/264454/api/home/babylist', resp => {
            if (resp.code === 200) {
              
              const { list } = resp.body
              $('#babyCategory').html(template('babyCategoryTemplate', { list }))
            }
          })
        }
        toBuy(){
          $('.shop-navbox').on('click','li',function(){
            location.href='/html/shoplist.html?id=12'
          })
        }
      }
      new Index()
    })
  })